<template>
  <div class="container">
      <div class="card">
          <span class="h1 card-header">{{examRankTitle}}</span>

          <div v-if="columns.length>0" key="easyTable" class="card-body">
              <br>
              <!--easytable插件  http://doc.huangsw.com/vue-easytable/app.html#/intro -->
              <v-table
                      is-horizontal-resize
                      style="width:100%"
                      :columns="columns"
                      :table-data="tableData"
                      :column-cell-class-name="columnCellClass"
              ></v-table>
          </div>
          <div v-else class="card-body h2 text-info">Loading . . .</div>
      </div>



  </div>
</template>

<script>
    export default {
        name: "examRank",
        data(){
            return {
                examRankTitle:'Rank List',
                columns: [],//表头
                tableData:[//数据
                    {rank:'1',nickname:'gg',solved:'3',penalty:'200',1:'201:43:19 (-1)',2:'270:18:50',4:'270:18:50',5:'(-1)'},
                    {rank:'2',nickname:'aa',solved:'2',penalty:'200',1:'201:43:19 (-1)',2:'270:18:50',4:'',5:''},
                ],
                submitData:[//提交情况 2首A  1Ac 0无提交 -1错误  按照rank排名向下排
                    {1:'2',2:'1',3:'0',4:'2',5:'-1'},
                    {1:'1',2:'2',3:'0',4:'0',5:'0'},
                ]
                // [ {field: 'rank', title:'Rank', width: 50, titleAlign: 'center',columnAlign:'center' ,isFrozen: true ,isResize: true},
                //     {field: 'nickname', title: 'Nickname', width: 100, titleAlign: 'center',columnAlign:'center' ,isFrozen: true , isResize: true},
                //     {field: 'solved', title: 'Solved', width: 60, titleAlign: 'center',columnAlign:'center',isFrozen: true, isResize: true},
                //     {field: 'penalty', title: 'Penalty', width:100, titleAlign: 'center',columnAlign:'center', isResize:true},
                //     {field: '1', title:'A', width:100, titleAlign:'center',columnAlign:'center',isResize:true},
                //     {field: '2', title:'A', width:100, titleAlign:'center',columnAlign:'center',isResize:true},
                //     {field: '3', title:'A', width:100, titleAlign:'center',columnAlign:'center',isResize:true},
                //     {field: '4', title:'A', width:100, titleAlign:'center',columnAlign:'center',isResize:true},
                //     {field: '5', title:'A', width:100, titleAlign:'center',columnAlign:'center',isResize:true},
                //     ]
            }
        },
        methods:{
            columnCellClass(rowIndex,columnName,rowData){// 设置单元格样式函数
                if (this.submitData[rowIndex][columnName]==2) { //首A
                    return 'column-cell-class-name-firstAccept'
                }
                if (this.submitData[rowIndex][columnName]==1) { //AC
                    return 'column-cell-class-name-accept'
                }
                if (this.submitData[rowIndex][columnName]==-1) { //error
                    return 'column-cell-class-name-error'
                }
            }
        }
    }
</script>

<style>
  .v-table-title-class{
    background-color: #8cc6ff;
    color:#4c4c4c;
    font-weight: bold;
  }
  .column-cell-class-name-firstAccept{
    background-color: #00ff99;
    color: white;
  }
  .column-cell-class-name-accept{
    background-color: green;
    color: white;
  }
  .column-cell-class-name-error{
    background-color: red;
    color: white;
  }
</style>
